<template>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>行政审批</el-breadcrumb-item>
        <el-breadcrumb-item>我的申请</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 条件查询 -->
    <el-card class="queryFormElCard mt-4">
        <el-form :model="queryParam" ref="queryFromRef">
            <el-row>
                <el-col :span="5">
                    <el-form-item label="流程名称">
                        <el-input v-model="queryParam.processName" placeholder="请输入流程名称" />
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item label="流程分类">
                        <el-select v-model="queryParam.category" placeholder="请选择流程分类" :clearable="true"
                            :filterable="true">
                            <el-option v-for="(item, index) in categoryList" :label="item.name" :value="item.code"
                                :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-space class="ml-2">
                        <el-button plain type="primary" :icon="Search" @click="querySelective">查询</el-button>
                        <el-button plain :icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-space>
                </el-col>
            </el-row>
        </el-form>
    </el-card>
    <!-- 表格、分页 -->
    <el-card>
        <el-table :data="tableData" border :header-cell-style="{ 'background': '#f2f2f2', 'color': '#515a6e' }"
            style="width: 100%" height="calc(100vh - 310px)" max-height="calc(100vh - 310px)" row-key="id"
            v-loading="tableLoading">
            <el-table-column prop="procInsId" label="流程编号" width="350px" />
            <el-table-column prop="procDefName" label="流程名称" width="250px" />
            <el-table-column prop="category" label="流程分类" />
            <el-table-column prop="procDefVersion" label="流程版本" />
            <el-table-column prop="taskName" label="当前节点" />
            <el-table-column prop="createTime" label="提交时间" />
            <el-table-column prop="finishTime" label="结束时间" />
            <el-table-column prop="duration" label="耗时" />
            <el-table-column prop="processStatus" label="流程状态" />
            <el-table-column label="操作" width="220px">
                <template #default="scope">
                    <el-space>
                        <el-button link type="primary" size="small" :icon="CircleClose"
                            @click="cancelMyRequest(scope.row)">取消</el-button>
                    </el-space>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="currentPageNum" v-model:page-size="currentPageSize"
            :page-sizes="[30, 50, 100, 300, 500]" layout="total, sizes, prev, pager, next, jumper" background
            :total="totalCount" @size-change="changePageSize" @current-change="changePageNum" />
    </el-card>
</template>

<script setup>
import { onMounted, ref, reactive, watch } from "vue"
import { CircleClose, Refresh, Search } from '@element-plus/icons-vue'
import { querySelectiveReq } from '@/api/workflow/my/request/index.js'
import { queryCategoryAllReq } from '@/api/workflow/category/index.js'

const categoryList = ref([])
onMounted(() => {
    Promise.all([
        queryCategoryAllReq(),
    ]).then(([categoryAllRes
    ]) => {
        categoryList.value = categoryAllRes.data;
        querySelective();
    });
})

// 条件查询
const queryParam = reactive({
    processName: '',
    category: '',
})
const queryFromRef = ref()
const resetQuery = () => {
    queryParam.processName = ''
    queryParam.category = ''
    queryFromRef.value?.resetFields();
    currentPageNum.value = 1
    querySelective();
}

// 分页查询、条件查询
const tableLoading = ref(false)
const tableData = ref([])
const total = ref()
const querySelective = () => {
    tableLoading.value = true;
    querySelectiveReq(
        currentPageNum.value,
        currentPageSize.value,
        {
            processName: queryParam.processName ? queryParam.processName : '',
            category: queryParam.category ? queryParam.category : '',
        }
    ).then(res => {
        if (res.code == 200) {
            tableData.value = res.data
            total.value = res.total
        }
    }).finally(() => {
        tableLoading.value = false
    })
}
const totalCount = ref(0)
watch(() => total.value, (newValue) => {
    totalCount.value = newValue;
});

const currentPageNum = ref(1)
const currentPageSize = ref(30)
// 翻页
const changePageNum = (pageNum) => {
    currentPageNum.value = pageNum
    querySelective();
}
// 改变页大小
const changePageSize = (pageSize) => {
    currentPageNum.value = 1
    currentPageSize.value = pageSize
    querySelective();
}

// 取消申请
const cancelMyRequest = (row) => {
    console.log("取消申请",row)
}
</script>

<style>
.queryFormElCard .el-card__body {
    padding-bottom: 0;
}
</style>